<template>
  <div class="flex flex-col w-full h-full border p-4 box-border rounded-lg">
    <div class="w-full overflow-hidden pb-4" @click.stop="() => {}">
      <QuickOptions v-model="modelValue" @change="() => emit('change')" />
    </div>
    <div class="flex-1 overflow-hidden relative">
      <div
        class="grid grid-cols-2 gap-2 content-start md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 w-full h-full overflow-y-auto"
        ref="scrollContainer"
      >
        <div
          ref="boxContainer"
          class="slider-style rounded-md"
          :class="{ active: pageIndex === 0 }"
          @click="handleSliderChange({ activeIndex: 0 })"
        ></div>
        <div
          class="slider-style rounded-md select-none"
          :class="{ active: pageIndex === 1 }"
          @click="handleSliderChange({ activeIndex: 1, swiper })"
        >
          <div class="w-full">{{ title }}</div>
          <div class="w-full">{{ subTitle }}</div>
        </div>
        <div
          v-for="(block, index) in sliderArr"
          :key="index"
          class="slider-style rounded-md overflow-hidden select-none"
          :class="{ active: pageIndex === index + 2 }"
          @click="handleSliderChange({ activeIndex: index + 2, swiper })"
        >
          <div v-for="(text, cindex) in block" :key="cindex" class="w-full">
            {{ text }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useModel, watch, ref, nextTick, computed } from "vue";
import QuickOptions from "../Config/QuickOptions.vue";
import useController from "../../hooks/useController";
import usePower from "../../hooks/usePower";

const boxContainer = ref(null);
const props = defineProps({
  modelValue: { type: Object, default: () => ({}) },
  screenInfo: { type: Object, default: () => ({}) },
  swiper: { type: Object, default: () => ({}) },
});
const emit = defineEmits(["update:modelValue", "change"]);
const modelValue = useModel(props, "modelValue", emit);
const scrollContainer = ref(null);

// const { power } = usePower(boxContainer, modelValue);
const power = ref(0.4);
const {
  lineHeight,
  subTitle,
  title,
  fontColor,
  sliderArr,
  fontSize,
  textAlign,
  bgColor,
  pageIndex,
  padding,
  handleSliderChange,
} = useController(modelValue, emit, power);

watch(pageIndex, () => {
  nextTick(() => {
    const activeel = scrollContainer.value.querySelector(".active");
    if (activeel) {
      scrollContainer.value.scroll({
        left: 0,
        top: activeel.offsetTop,
        behavior: "smooth",
      });
    }
  });
});
</script>
<style scoped>
.slider-style {
  background-color: v-bind(bgColor);
  text-align: v-bind(textAlign);
  font-size: 10px;
  color: v-bind(fontColor);
  /* line-height: v-bind(lineHeight); */
  display: flex;
  align-items: start;
  flex-direction: column;
  justify-content: start;
  font-weight: 800;
  transition: height 0.3s linear;
  padding: v-bind(padding);
  height: 120px;
  @apply border-transparent border-4;
}

.slider-style.active {
  @apply border-orange-400 border-4;
}

.swiper {
  --swiper-pagination-color: #fff; /* 两种都可以 */

  --swiper-navigation-color: #fff; /* 单独设置按钮颜色 */
  --swiper-navigation-size: 30px; /* 设置按钮大小 */
}
</style>
